<template>
  <div v-if="show">
    <el-form
      ref="ruleFormRef"
      label-position="top"
      label-width="120px"
      class="chooseForm"
      :model="form"
      :rules="rules"
    >
      <el-row class="athletesform">
        <!-- <el-col v-show="signType!=0" :span="8" style="max-height: 70vh;overflow: auto;">
          <el-form-item label="可报运动员" class="athletes">
            <el-radio-group v-model="form.manId" class="ml-4">
              <div v-for="item in athletesList" :key="item.id" :ref="item.id" class="mb20">
                <el-radio-button :label="item.id" size="large" @change="c(item)">
                  <div class="optionFlex">
                    <el-avatar v-show="item.picUrl" :size="40" :src="item.picUrl" />
                    <p class="name">{{ item.realName }}
                      <span v-show="item.sex=='0'">(女)</span>
                      <span v-show="item.sex=='1'">(男)</span>
                    </p>
                  </div>
                </el-radio-button>
                <el-button
                  v-if="noPhotoCanSign=='0'&&(!item.picUrl)" class="ml20" type="text"
                  @click="editPersonInfo(item.id,nowMan.groupId)"
                >上传照片
                </el-button>
              </div>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
        <el-col v-loading="loading" :span="24">
          <el-empty v-show="treeData.length < 1" description="请选择运动员" />

          <div v-for="(project, index) in treeData" :key="project.id" class="collapse">
            <div class="collapse-title" >{{ project.name }}</div>
            <div
              class="collapse-content"
              v-show="project.hasNext == 0 && project.canSign == '1'"
            >
              <el-checkbox-group v-model="form.levelId" size="large">
                <el-checkbox :label="project.levelId" border>{{
                  project.name
                }}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div
              class="collapse-content flex"
              v-show="project.hasNext == 1 && project.canSign == '1'"
              :title="project.name"
              :name="index"
            >
            
              <div v-for="group in project.groupList" :key="group.id">
                <div v-show="group.hasNext == 0">       
                  <el-checkbox-group v-model="form.levelId" size="large">
                    <el-checkbox
                      class="mr-10 flex"
                      v-show="group.canSign == '1'"
                      :label="group.levelId"
                      border
                      >{{ group.name }}  <el-icon v-if="project.groupPersonMaxLimit>0" class="ml-10"><UserFilled /></el-icon></el-checkbox
                    >
                    <!--                    <el-checkbox v-show="group.hasNext!=0" disabled :label="group.id">{{ group.name }}</el-checkbox>-->
                  </el-checkbox-group>
                </div>

                <div v-show="group.hasNext == 1" class="flex">
                  <el-checkbox-group
                    v-for="level in group.levelList"
                    :key="level.id"
                    v-model="form.levelId"
                    size="large"
                  >
                    <!-- project.type判断选队友  signId删除报项 :disabled="level.canSign==0||level.belongToThisTeam==0"-->
                    <el-checkbox
                      class="mr-10 mb-10 flex "
                      v-show="level.canSign == 1"
                      :label="level.id"
                      :checked="level.checked"
                      border
                    >
                      {{ group.name }}{{ level.name }} 
                      <span v-show="level.levelType == '1'">(男)</span>
                      <span v-show="level.levelType == '2'">（女）</span>
                      <el-icon class="ml-10"><UserFilled /></el-icon>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      v-model="showMateList"
      title="选择队友"
      width="700px"
      draggable
      destroy-on-close
      @close="mateClose"
    >
      <el-row v-if="sonLevelList.length <= 0">
        <el-col :span="11" class="chooseBox">
          <p class="chooseTitle">可选成员</p>
          <el-empty v-if="teammateList.length == 0" description="暂无可选队友" />
          <div class="teammateList" style="max-height: 60vh; overflow: auto">
            <el-checkbox-group
              v-model="form.mates"
              class="ml-4"
              @change="changeTeammates"
            >
              <el-checkbox
                checked
                disabled
                :label="personal.sex + '_' + personal.id"
                size="large"
              >
                <div class="optionFlex">
                  <el-avatar v-show="personal.picUrl" :size="40" :src="personal.picUrl" />
                  <p class="name">
                    {{ personal.realName }}
                    <span v-show="personal.sex == '0'">(女)</span>
                    <span v-show="personal.sex == '1'">(男)</span>
                  </p>
                  <el-select
                    v-show="sonLevelList.length > 0"
                    v-model="personal.sonlevel"
                    clearable
                  >
                    <el-option
                      v-for="son in sonLevelList"
                      :value="son.id"
                      :label="son.name"
                      >{{ son.name }}</el-option
                    >
                  </el-select>
                </div>
              </el-checkbox>

              <div v-for="(item, index) in teammateList" :key="item.id">
                <el-checkbox
                  :label="item.sex + '_' + item.id"
                  size="large"
                  :disabled="item.cantchosemate"
                >
                  <div class="optionFlex">
                    <el-avatar v-show="item.picUrl" :size="40" :src="item.picUrl" />
                    <p class="name">
                      {{ item.realName }}
                      <span v-if="item.sex == '0'">(女)</span>
                      <span v-else>(男)</span>
                    </p>
                    <el-select
                      v-show="sonLevelList.length > 0"
                      v-model="item.sonlevel"
                      clearable
                    >
                      <el-option
                        v-for="son in sonLevelList"
                        :value="son.id"
                        :label="son.name"
                        >{{ son.name }}</el-option
                      >
                    </el-select>
                  </div>
                </el-checkbox>
                <el-button
                  v-if="noPhotoCanSign == '0' && !item.picUrl"
                  class="ml20"
                  type="text"
                  @click="editPersonInfo(item.id, nowMan.groupId)"
                >
                  上传照片
                </el-button>
              </div>
            </el-checkbox-group>
          </div>
        </el-col>
        <el-col :span="2" class="chooseBox chooseBox2">
          <el-icon :color="variables.primaryColor" size="30px" @click="chooseToRight"
            ><CaretRight
          /></el-icon>
        </el-col>
        <el-col :span="11" class="chooseBox">
          <p class="chooseTitle">
            已选成员
            <span class="fr" v-if="mateConfig.minCount != mateConfig.maxCount"
              >{{ mateConfig.minCount + 1 }}~{{ mateConfig.maxCount + 1 }}个成员</span
            >
            <span
              class="fr"
              v-else-if="mateConfig.minCount == '-1' && mateConfig.maxCount == '-1'"
              >{{ matesListSure.length + "/" + 2 }}</span
            >
            <span class="fr" v-else>{{
              matesListSure.length + "/" + (mateConfig.minCount + 1)
            }}</span>
          </p>
          <div class="teammateList" style="max-height: 60vh; overflow: auto">
            <p v-for="(item, index) in matesListSure" :key="index">
              {{ item.realName }} <span v-if="item.sex == '0'">(女)</span
              ><span v-else>(男)</span>
            </p>
          </div>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="11">
          <div class="teammateList" style="max-height: 60vh; overflow: auto;border:1px solid #ddd;padding:0">
            <el-radio-group
              v-model="form.mates"
              class="ml-4"
              @change="changeTeamSportsmates"
              
            >
              <div class="chooseTitle">必选成员</div>
              <el-radio
                :label="personal.sex + '_' + personal.id"
                size="large"
                :disabled="matesList.indexOf(personal.id) != -1"
              >
                <div class="optionFlex">
                  <el-avatar v-show="personal.picUrl" :size="40" :src="personal.picUrl" />
                  <p class="name">
                    {{ personal.realName }}
                    <span v-show="personal.sex == '0'">(女)</span>
                    <span v-show="personal.sex == '1'">(男)</span>
                  </p>
                </div>
              </el-radio>
              <div class="chooseTitle">可选成员</div>
              <div v-for="(item, index) in teammateList" :key="item.id">
                <el-radio
                  :label="item.sex + '_' + item.id"
                  size="large"
                  :disabled="item.cantchosemate"
                >
                  <div class="optionFlex">
                    <el-avatar v-show="item.picUrl" :size="40" :src="item.picUrl" />
                    <p class="name">
                      {{ item.realName }}
                      <span v-if="item.sex == '0'">(女)</span>
                      <span v-else>(男)</span>
                    </p>
                  </div>
                </el-radio>
                <el-button
                  v-if="noPhotoCanSign == '0' && !item.picUrl"
                  class="ml20"
                  type="text"
                  @click="editPersonInfo(item.id, nowMan.groupId)"
                >
                  上传照片
                </el-button>
              </div>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="13">
          <div v-for="(son, index) in sonLevelList" class="flex yxBox" :key="index">
            <div class="chooseBox2">
              <el-icon
                :color="variables.primaryColor"
                size="30px"
                @click="() => chooseToSportsRight(index)"
                ><CaretRight
              /></el-icon>
            </div>

            <div class="yxListBox">
              <p class="chooseTitle">{{ son.name }}  <span class="fr">{{son.person?'1/1':'0/1'}}</span></p>
              <div class="personBox">
                <p v-if="son.person">
                  {{ son.person.realName }}{{ son.person.sex == "0" ? "(女)" : "(男)" }}
                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button v-if="sonLevelList.length <= 0" type="primary" @click="chooseMateDone">确定</el-button>
          <el-button v-else type="primary" @click="chooseSportsMateDone">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <dialogPersonInfo ref="editPersonInfoRef" @submitForm="getAthletesList" />
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from "vue";
import { getCurrentInstance, nextTick, onMounted } from "@vue/runtime-core";
import * as match from "@/api/match/pc";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const emit = defineEmits(["submitForm"]);
import dialogPersonInfo from "../components/addCoach";
import _ from "lodash";
import variables from '@/assets/styles/variables.module.scss'
const data = reactive({
  show: false,
  title: "",
  signType: "",
  form: {
    levelId: [],
    mates: [],
  },
  athletesList: [],
  signProjectList: [],
  signGroupList: [],
  showMateList: false,
  showBtn: false,
  teammateList: [],
  rankId: "0",
  treeData: [],
  loading: false,
  mateConfig: {},
  noPhotoCanSign: null,
  coachOrLeaderFlag: null,
  personal: {},
  activeNames: [0],
  matesListSure: [],
});
const {
  signType,
  form,
  rules,
  loading,
  activeNames,
  athletesList,
  treeData,
  show,
  title,
  personal,
  rankId,
  showMateList,
  showBtn,
  teammateList,
  mateConfig,
  noPhotoCanSign,
  coachOrLeaderFlag,
  matesListSure,
} = toRefs(data);
let matchId;
let groupId;
watch(show, (val) => {
  if (!val) {
    form.value = {};
    treeData.value = [];
    delWatch();
  }
});
const changePersonal = (item) => {
  // delWatch()
  personal.value = item;
  form.value.manId = item.id;
  getTree();
};

function getTree() {
  noLevelId = "";
  loading.value = true;
  console.log(form.value.manId)
  match.getMySignListTree(matchId, form.value.manId, rankId.value).then((res) => {
    treeData.value = res.data;
    // 循环项目，组，级别 赋值是否checked
    getMyIsSign();
  });
}

let signOk = {};

function getMyIsSign() {
  delWatch();
  form.value.levelId = [];
  match.getMySignIds(matchId, form.value.manId, rankId.value).then((res) => {
    loading.value = false;
    signOk = res.data;
    for (const s of signOk) {
      form.value.levelId.push(s.eid);
      for (const p of treeData.value) {
        if (p.levelId == s.eid) {
          p.checked = true;
          p.signId = s.signId;
          p.belongToThisTeam = s.belongToThisTeam;        
							p.canSign="1"
        } else {
          for (const g of p.groupList) {
            g.type = p.type;
            if (g.levelId == s.eid) {
              g.checked = true;
              g.signId = s.signId;
              g.belongToThisTeam = s.belongToThisTeam;
              g.canSign="1"
            } else {
              for (const l of g.levelList) {
                l.type = p.type;
                if (s.eid == l.id) {
                  l.checked = true;
                  l.signId = s.signId;
                  l.belongToThisTeam = s.belongToThisTeam;
                  l.canSign="1"
                }
              }
            }
          }
        }
      }
    }
    if (signOk.length < 1) {
      for (const p of treeData.value) {
        for (const g of p.groupList) {
          g.type = p.type;
          for (const l of g.levelList) {
            l.type = p.type;
          }
        }
      }
    }
    addWatch();
  });
}

//#region 监听叶子的数量变化
let noLevelId;
let levelInfo;
let watchHandle = null;

function addWatch() {
  delWatch();
  watchHandle = watch(
    () => form.value.levelId,
    (newValue, oldValue) => {
      if (!newValue) return;
      oldValue = _.uniq(oldValue);
      newValue = _.uniq(newValue);
      // console.log(newValue, oldValue)
      let temp;
      let isAdd = false;
      if (newValue?.length > oldValue?.length) {
        isAdd = true;
        temp = _.difference(newValue, oldValue);
      } else {
        isAdd = false;
        temp = _.difference(oldValue, newValue);
      }
      if (newValue[0] == temp[0]) {
      }
      if (temp.length === 1) {
        levelInfo = findlevelInfo(temp[0], treeData.value, 1);
        if (isAdd) {
          noLevelId = temp[0];
          judgeChooseTeam(levelInfo.type, temp[0]);
        } else {
          if (!temp[0] || temp[0] == undefined) {
            return;
          }
          removeThis(levelInfo.signId);
        }
      }
      // console.log(isAdd, temp[0])
    }
  );
}

function delWatch() {
  if (watchHandle) {
    watchHandle();
    watchHandle = null;
  }
}

function findlevelInfo(id, list, deep) {
  let info = null;
  _.some(list, (l) => {
    switch (deep) {
      case 1: // p
        if (l.levelId == id) {
          info = l;
        } else {
          info = findlevelInfo(id, l.groupList, 2);
        }
        break;
      case 2: // g
        if (l.levelId == id) {
          info = l;
        } else {
          info = findlevelInfo(id, l.levelList, 3);
        }
        break;
      case 3: // l
        if (l.id == id) {
          info = l;
        }
        break;
    }
    return info;
  });

  return info;
}

//#endregion
function getAthletesList() {
  match.getMyGroupForCpt(groupId, matchId).then((res) => {
    athletesList.value = res.data.athletes;
    if (form.value.manId) {
      for (const a of athletesList.value) {
        if (a.id == form.value.manId) {
          nowMan.value = a;
        }
      }
    }
  });
}

const open = (params) => {
  show.value = true;
  matchId = params.matchId;
  groupId = params.groupId;
  signType.value = params.signType;
  title.value = params.title;
  rankId.value = params.rankId || "";
  noPhotoCanSign.value = params.noPhotoCanSign;
  coachOrLeaderFlag.value = params.coachOrLeaderFlag;
  if (params.personal) {
    form.value.manId = params.personal.id;
    // setTimeout(() => {
    //   proxy.$refs[params.personal.id][0].scrollIntoView({ block: 'start', behavior: 'smooth' })
    // }, 200)

    getTree();
    personal.value = params.personal;
  }
  if (groupId != 0) {
    if (params.choosedList) {
      athletesList.value = params.choosedList;
      if (form.value.manId) {
        for (const a of athletesList.value) {
          if (a.id == form.value.manId) {
            nowMan.value = a;
          }
        }
      }
    } else {
      getAthletesList();
    }
  }
};
defineExpose({
  open,
});

const nowMan = ref({});
const sonLevelList = ref([]);
let sonLevelIds = [];

function editPersonInfo(id, groupId) {
  const params = {
    id: id,
    groupId: groupId,
  };
  proxy.$refs["editPersonInfoRef"].open(params);
}

function addTeamMate() {
  const params = {
    id: 0,
    groupId: groupId,
  };
  proxy.$refs["editPersonInfoRef"].open(params);
}
function transferChange(value, direction, movedKeys) {
  console.log(value, direction, movedKeys);
}
const judgeChooseTeam = (type, levelId) => {
  const tmArr = ["1", "2", "3", "4", "6"];
  if (tmArr.indexOf(type) > -1) {
    getTeammate(levelId);
  } else {
    const obj = {
      levelId: levelId,
      athleteIds: form.value.manId,
      groupId: groupId,
      teamId: rankId.value || "",
    };
    saveOne(obj);
  }
};
const getTeammate = (levelId) => {
  const obj = {
    levelId: levelId,
    groupId: groupId,
    personId: form.value.manId,
  };
  match
    .getCanSignLevelPerson(obj)
    .then((res) => {
      mateConfig.value = res.data;
      teammateList.value = res.data.personList;
      for (const p of teammateList.value) {
        p.cantchosemate = false;
        if (mateConfig.value.maxMaleCount == 0 && p.sex == "1") {
          p.cantchosemate = true;
        }
        if (mateConfig.value.maxFemaleCount == 0 && p.sex == "0") {
          p.cantchosemate = true;
        }
      }
      getSonLevels(levelId);
      showMateList.value = true;
      form.value.mates = [];
      sonLevelIds = [];
      personal.value.sonlevel = "";
    })
    .catch((error) => {
      getMyIsSign();
    });
};

function getSonLevels(level) {
  sonLevelList.value = [];
  match.querySonLevel(level).then((res) => {
    sonLevelList.value = res.data;
  });
}

let manNum = 0; //男的数量
let femaleNum = 0; //女的数量
let mates = [];
let matesList = [];
const changeTeammates = (e) => {
  mates = [];
  manNum = 0;
  femaleNum = 0;
  for (const m of e) {
    const arr = m.split("_");
    mates.push(arr[1]);
    if (personal.value.id == arr[1]) {
      continue;
    }
    if (arr[0] == "1") {
      manNum++;
    } else {
      femaleNum++;
    }
  }
  // console.log(mates, mateConfig.value)
  matesList = [];
  matesList.push(personal.value);
  for (const p of teammateList.value) {
    if (mates.indexOf(p.id) != -1) {
      matesList.push(p);
    }
    if (
      mateConfig.value.maxMaleCount != -1 &&
      manNum == mateConfig.value.maxMaleCount &&
      p.sex == "1" &&
      mates.indexOf(p.id) == -1
    ) {
      p.cantchosemate = true;
    } else if (
      mateConfig.value.maxFemaleCount != -1 &&
      femaleNum == mateConfig.value.maxFemaleCount &&
      p.sex == "0" &&
      mates.indexOf(p.id) == -1
    ) {
      p.cantchosemate = true;
    } else if (
      mates.indexOf(p.id) == -1 &&
      mateConfig.value.maxCount != -1 &&
      mates.length - 1 == mateConfig.value.maxCount
    ) {
      p.cantchosemate = true;
    } else {
      p.cantchosemate = false;
    }
  }
};
const changeTeamSportsmates = (e) => {
  const arr = e.split("_");
  mates = arr[1];
};
const chooseToRight = () => {
  matesListSure.value = matesList;
};
const chooseToSportsRight = (e) => {
  if (mates) {
    if (personal.value.id == mates) {
      //  personal.value.cantchosemate=true
      sonLevelList.value[e].person = personal.value;
    } else {
      for (const p of teammateList.value) {
        if (mates == p.id) {
          sonLevelList.value[e].person = p;
          // p.cantchosemate=true
        }
      }
    }

     changeDisabled()
  } else {
    ElMessage.error("请先选择要添加的成员");
  }
};

const changeDisabled = () => {
   matesList = [];
    for( const m of sonLevelList.value){
      if(m.person){
        matesList.push(m.person.id)
      }
      
    }
  for (const p of teammateList.value) {
    p.cantchosemate = false;
    if (matesList.indexOf(p.id) != -1) {
      p.cantchosemate = true;
    }
  }
};
const mateClose = () => {
  matesListSure.value = [];
  matesList = [];
  mates = [];
  form.value.mates = [];
  sonLevelIds = [];
  teammateList.value = [];
  getMyIsSign();
};

function chooseMateDone() {
  let manNum1 = 0;
  let femaleNum1 = 0;
  let mates1 = [];

  for (const m of matesListSure.value) {
    mates1.push(m.id);
    if (m.sex == "1") {
      manNum1++;
    } else {
      femaleNum1++;
    }
  }
  if (
    mateConfig.value.minMaleCount != "-1" &&
    mateConfig.value.minMaleCount != "0" &&
    manNum1 < mateConfig.value.minMaleCount
  ) {
    ElMessage.error(`至少选择${mateConfig.value.minMaleCount}个男队友`);
    return;
  }
  if (
    mateConfig.value.maxMaleCount != "-1" &&
    mateConfig.value.maxMaleCount != "0" &&
    manNum1 > mateConfig.value.maxMaleCount
  ) {
    ElMessage.error(`最多选择${mateConfig.value.maxMaleCount}个男队友`);
    return;
  }
  if (
    mateConfig.value.minFemaleCount != "-1" &&
    mateConfig.value.minFemaleCount != "0" &&
    femaleNum1 < mateConfig.value.minFemaleCount
  ) {
    ElMessage.error(`至少选择${mateConfig.value.minFemaleCount}个女队友`);
    return;
  }
  if (
    mateConfig.value.maxFemaleCount != "-1" &&
    mateConfig.value.maxFemaleCount != "0" &&
    femaleNum1 > mateConfig.value.maxFemaleCount
  ) {
    ElMessage.error(`最多选择${mateConfig.value.maxFemaleCount}个女队友`);
    return;
  }
  if (mates1.length < mateConfig.value.minCount && mateConfig.value.minCount > 0) {
    ElMessage.error(`至少选择${mateConfig.value.minCount}个队友`);
    return;
  }
  const athleteIds = [];
  for (const p of teammateList.value) {
    if (mates1.indexOf(p.id) != -1) {
      if (sonLevelList.value.length > 0 && !p.sonlevel) {
        ElMessage.error(`请分配级别`);
        return;
      }
      sonLevelIds.push(p.sonlevel);
      athleteIds.push(p.id);
    }
  }
  if (sonLevelList.value.length > 0 && !personal.value.sonlevel) {
    ElMessage.error(`请分配级别`);
    return;
  }
  sonLevelIds.push(personal.value.sonlevel);
  athleteIds.push(personal.value.id);
  if (sonLevelList.value.length == 0) {
    sonLevelIds = [];
  }
  const obj = {
    levelId: noLevelId,
    athleteIds: athleteIds.toString(),
    sonLevelIds: sonLevelIds.toString() || "",
    groupId: groupId,
    teamId: rankId.value || "",
  };
  // 半提交
  saveOne(obj);
}
function chooseSportsMateDone(){
  if (matesList.length < mateConfig.value.minCount+1 && mateConfig.value.minCount > 0) {
    ElMessage.error(`至少选择${mateConfig.value.minCount+1}个成员`);
    return;
  }
 if(matesList.indexOf(personal.value.id) == -1){
  ElMessage.error('必选成员未被选择');
  return;
 }
  const athleteIds = [];
  sonLevelList.value.forEach(item=>{
    sonLevelIds.push(item.id)
    athleteIds.push(item.person.id)
  })
  const obj = {
    levelId: noLevelId,
    athleteIds: athleteIds.toString(),
    sonLevelIds: sonLevelIds.toString() || "",
    groupId: groupId,
    teamId: rankId.value || "",
  };
  // 半提交
  saveOne(obj);
   
}
const saveOne = (obj) => {
  loading.value = true;
  match
    .sportsmanDone(obj)
    .then((res) => {
      if (res.msg.indexOf("Exception:") > -1) {
        const msg = res.msg.slice(10);
        ElMessage({
          type: "warning",
          message: msg,
        });
        // form.value.mates = []
        sonLevelIds = [];
        getMyIsSign();
        return;
      }
      sonLevelIds = [];
      // form.value.mates = []
      showMateList.value = false;
      sonLevelList.value = [];
      getMyIsSign();
      emit("submitForm");
    })
    .catch((err) => {
      // 取消这个勾
      getMyIsSign();
      sonLevelIds = [];
    });
};

function removeThis(id) {
  loading.value = true;
  match
    .deleteSign(id)
    .then((res) => {
      // 重新获取已报名信息
      loading.value = false;
      emit("submitForm");
    })
    .catch((err) => {
      getMyIsSign();
    });
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap:wrap;
}
.optiontitle {
  font-size: 14px;
  padding: 0 10px;
  line-height: 1;
  margin: 10px 0;
  border-left: 2px solid $--color-primary;
}

.optionFlex {
  display: flex;
  align-items: center;
  padding: 10px 0;
  width: 100%;

  .name {
    margin: 0 20px;
    font-size: 16px;
  }
}

.el-radio-group {
  width: 100%;
  display: block;
}
.el-radio{
  margin: 10px 20px;
}
.athleteBox {
  height: 80px;
  display: flex;
  align-items: center;

  :deep(.el-radio__label) {
    display: flex;
    align-items: center;
    margin: 0 20px;
  }

  .el-radio__inner {
    scale: 1.5;
  }

  .name {
    margin: 0 20px;
    font-size: 16px;
  }
}

.athleteBox:hover {
  background: #efefef;
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

p.title {
  font-size: 16px;
  margin: 0 0 15px;
}

:deep(.el-collapse-item) {
  background: #fbfcfd;
  margin: 0 0 16px;
  padding: 0 15px;
}

:deep(.el-collapse-item__wrap) {
  background: #fbfcfd;
  border: none;
  padding: 0 10px;
}

:deep(.el-collapse) {
  border: none;
}

:deep(.el-collapse-item__header) {
  border: none;
  background: #ececec;
  padding: 0 0 0 10px;
  font-size: 15px;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 0;
}

:deep(.el-checkbox__input.is-disabled + span.el-checkbox__label) {
  color: #4c5359;
}

.fake-collapse-item {
  // background: #FBFCFD;
  //margin: 0 0 16px;
  //padding: 0 15px;
}
:deep(.el-checkbox.el-checkbox--large .el-checkbox__label) {
  font-size: 16px;
  width: auto;
  display:flex;
  align-items:center;
}
.teammateList :deep(.el-checkbox.el-checkbox--large) {
  height: auto;
  display: flex;
  width: 100%;
  box-sizing: border-box;
}
.athletesform {
  border: 1px solid $--color-primary;
  border-radius: 4px;
  padding-bottom: 10px;
}
.collapse {
  .collapse-title {
    background: #faebeb;
    margin-top: 10px;
    padding: 8px 20px;
  }
  .collapse-content {
    padding: 10px 20px 0 20px;
  }
}
::v-deep {
  .collapse-content {
    .el-checkbox-group {
      .el-checkbox {
      }
    }
  }
}
.chooseBox {
  border: 1px solid #ddd;
}
.chooseBox2 {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-icon {
    cursor: pointer;
  }
}
.chooseTitle {
  box-sizing: border-box;
  background: #deecf9;
  margin: 0;
  padding: 0 10px;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}
.fr {
  float: right;
}
.teammateList {
  width: 100%;
  padding: 0 10px;
}
.yxBox {
  .chooseBox2 {
    width: 100px;
  }
  .yxListBox {
    width: calc(100% - 100px);
    border: 1px solid #ddd;
    margin-bottom: 10px;
    .personBox {
      padding: 10px;
      p {
        width: 120px;
        background: $--color-primary;
        color: #fff;
        margin: 0;
        padding: 8px 10px;
        border-radius: 4px;
      }
    }
  }
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
        width: 2px;
        height: 2px;
        background-color: #F5F5F5;
    }
 
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2px #c6cac6;
        border-radius: 2px;
        background-color: #F5F5F5;
    }
 
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius:2px;
        box-shadow: inset 0 0 2px #cde0ca;
        background-color: #728572;
    }
</style>
  